<template>
  <div>
    <div class="login-wrap" v-show="showLogin">
      <img
        src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3113882013,2688398903&fm=173&app=25&f=JPG?w=550&h=348&s=6AE0F05C2C937FD8D12107640300707E"
        alt="">
      <h3>登录</h3>
      <p v-show="showTishi">{{tishi}}</p>
      <input type="text" placeholder="请输入用户名" v-model="username">
      <input type="password" placeholder="请输入密码" v-model="password">
      <button @click="login">登录</button>
      <span @click="ToRegister">没有账号？马上注册</span>
    </div>

    <!--注册页面-->
    <transition name="slider">
      <div class="register-wrap" v-show="showRegister">
        <img
          src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3113882013,2688398903&fm=173&app=25&f=JPG?w=550&h=348&s=6AE0F05C2C937FD8D12107640300707E"
          alt="">
        <h3>注册</h3>
        <p v-show="showTishi">{{tishi}}</p>
        <input type="text" placeholder="请输入用户名" v-model="newUsername">
        <input type="password" placeholder="请输入密码" v-model="newPassword">
        <input type="password" placeholder="请再次确认密码" v-model="newPassword">
        <button @click="register">注册</button>
        <span @click="ToLogin">已有账号？马上登录</span>
      </div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
  import {setCookie, getCookie} from 'common/js/cookie'
  // import mysql from 'mysql'

  export default {
    data() {
      return {
        showLogin: true,
        showRegister: false,
        showTishi: false,
        tishi: '',
        username: '',
        password: '',
        newUsername: '',
        newPassword: ''
      }
    },
    mounted() {
      // 如果存在username，跳转到主页，不需要登录
      if (getCookie('username')) {
        this.$router.push('/goods')
      }
    },
    methods: {
      // 登录功能
      login() {
        if (this.username === '' || this.password === '') {
          alert('请输入用户名或密码')
        } else {
          let data = {'username': this.username, 'password': this.password}
          // let db = mysql.createPool({host: 'localhost', user: 'root', password: 'wjff', database: 'user_table'});
          // 接口请求
          this.$http.post('http://localhost/', data).then(res => {
            console.log(res)
            // 接口的传值是(-1,该用户不存在),(0,密码错误)，同时还会检测管理员账号的值
            if (res.data === -1) {
              this.tishi = '该用户不存在'
              this.showTishi = true
            } else if (res.data === 0) {
              this.tishi = '密码输入错误'
              this.showTishi = true
            } else if (res.data === 'admin') {
              this.$router.push('/goods')
            } else {
              this.tishi = '登录成功'
              this.showTishi = true
              setCookie('username', this.username, 1000 * 60)
              setTimeout(() => {
                this.$router.push('/goods')
              }, 2000)
            }
          })
        }
      },
      // 注册功能
      register() {
        if (this.username === '' || this.password === '') {
          alert('请输入用户名或密码')
        } else {
          let data = {'username': this.username, 'password': this.password}
          // 接口请求
          this.$http.post('http://localhost/vueapi/index.php/Home/user/login', data).then(res => {
            console.log(res)
            if (res.data === 'ok') {
              this.tishi = '注册成功'
              this.showTishi = true
              this.username = ''
              this.password = ''
              // 注册成功之后再跳回登录页
              setTimeout(() => {
                this.showRegister = false
                this.showLogin = true
                this.showTishi = false
              }, 1000)
            }
          })
        }
      },
      ToRegister() {
        this.showRegister = true
        this.showLogin = false
      },
      ToLogin() {
        this.showRegister = false
        this.showLogin = true
      }
    }
  }
</script>

<style scoped>
  .login-wrap, .register-wrap {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #fff;
    /*动画*/
  . slider-enter-active, . slider-leave-active transition: all 0.5 s;
  . slider-enter, . slider-leave-to opacity: 0;
  }

  img {
    padding-top: 30px;
    width: 300px;
    height: 300px;
    margin: 0 auto;
  }

  h3 {
    margin: 20px 0 20px 0;
    font-size: 20px;
    font-weight: bold;
  }

  input {
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    margin-bottom: 10px;
    outline: none;
    border: 1px solid #888;
    padding: 10px;
    box-sizing: border-box;
  }

  p {
    color: red;
  }

  button {
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    border: none;
    background-color: #41b883;
    color: #fff;
    font-size: 16px;
    margin-bottom: 5px;
  }

  span {
    cursor: pointer;
  }

  span:hover {
    color: #41b883;
  }
</style>
